<template>
	<div>
		<!-- 登录界面 -->
		<video autoplay="autoplay" muted="muted" loop="loop">
			<source
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c0a73c85-726e-4071-ab36-1a3be45f6150/2e52bb99-847c-4b91-bf92-01df0a59ab0c.mp4"
				type="video/mp4">
		</video>
		<div class="login">
			<!-- 登录表单 -->
			<el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="200px" class="login-1">
				<h2>注册</h2>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input type="text" v-model="loginForm.username" placeholder="账号" prefix-icon="el-icon-s-custom
			" class="input1">
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.password" placeholder="密码"
						prefix-icon="el-icon-lock" class="input2"></el-input>
				</el-form-item>
				
				<!-- 确认密码 -->
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.checkPassword" placeholder="确认密码"
						prefix-icon="el-icon-lock" class="input3"></el-input>
				</el-form-item>
				
				
				
				<!-- 按钮 -->
				<el-form-item>
					<el-button type="primary" class="btn">注册</el-button>
					<el-button type="primary" class="btn" @click="$router.push('/')">返回</el-button>
				</el-form-item>			
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					checkPassword:''
				},
				//表单验证规则对象
				loginFormRules: {
					//验证用户名是否合法
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					//验证密码是否合法
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 6 到 10 个字符',
							trigger: 'blur'
						}
					],
					checkPassword: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 6 到 10 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods:{
			
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	div {
		box-sizing: border-box;
	}

	video {
		position: fixed;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: -9999;
		object-fit: fill;
	}

	.login {
		background-color: rgb(228, 245, 255);
		width: 50%;
		height: 400px;
		margin: auto;
		border-radius: 30px;
		margin-top: 200px;
	}

	.login {
		text-align: center;
		padding-top: 30px;
		padding-right: 200px;
	}

	.login h2 {
		margin-left: 180px;
		font-size: 40px;
		color: #313131;
		letter-spacing: 20px;
		margin-bottom: 20px;
	}
	.input1,
	.input2 {
		
	}
	.btn {
		margin-top: 10px;
		margin-right: 10px;
	}
</style>
